

function addEventListeners()
{
    $('button.remove').off();
    $('button.add').off();
    $('button.refresh').off();

    // remove
    $('button.remove').click(function(e) {
        e.preventDefault();
        $(this).closest('.input-group').remove();
    });

    // add
    $('button.add').click(function(e) {
        e.preventDefault();
        var input = $(this).closest('.input-group');

        var markup = '';

        markup += '<div class="input-group">\n';
        markup += '<input type="text" name="permission[]" class="form-control inline" placeholder="Permission" required>\n';
        markup += '<input type="text" name="function_call[]" class="form-control inline" placeholder="Corresponding Function" required>\n';
        markup += '<span class="input-group-btn">\n';
        markup += '<button type="button" class="btn btn-default add"><i class="fa fa-plus"></i></button>\n';
        markup += '<button type="button" class="btn btn-default remove"><i class="fa fa-minus"></i></button>\n';
        markup += '</span>\n';
        markup += '</div>\n';

        input.after(markup);
        addEventListeners();
    });
    
    // refresh
    $('button.refresh').click(function(e) {
        e.preventDefault();
        var permissions = '<div class="input-group">\n\
                            <input type="text" name="permission[]" id="view" class="form-control inline" placeholder="View" value="View" readonly>\n\
                            <input type="text" name="function_call[]" id="view_function" class="form-control inline" placeholder="view" value="index">\n\
                            <span class="input-group-btn">\n\\n\
                                <button type="button" class="btn btn-default add"><i class="fa fa-plus"></i></button>\n\
                                <button type="button" class="btn btn-default refresh"><i class="fa fa-refresh"></i></button>\n\
                            </span>\n\
                        </div>\n\
                        <div class="input-group">\n\
                            <input type="text" name="permission[]" id="add" class="form-control inline" placeholder="Add" value="Add" readonly>\n\
                            <input type="text" name="function_call[]" id="add_function" class="form-control inline" placeholder="add" value="add">\n\
                            <span class="input-group-btn">\n\\n\
                                <button type="button" class="btn btn-default add"><i class="fa fa-plus"></i></button>\n\
                                <button type="button" class="btn btn-default remove"><i class="fa fa-minus"></i></button>\n\
                            </span>\n\
                        </div>\n\
                        <div class="input-group">\n\
                            <input type="text" name="permission[]" id="edit" class="form-control inline" placeholder="Edit" value="Edit" readonly>\n\
                            <input type="text" name="function_call[]" id="edit_function" class="form-control inline" placeholder="edit" value="edit">\n\
                            <span class="input-group-btn">\n\\n\
                                <button type="button" class="btn btn-default add"><i class="fa fa-plus"></i></button>\n\
                                <button type="button" class="btn btn-default remove"><i class="fa fa-minus"></i></button>\n\
                            </span>\n\
                        </div>\n\
                        <div class="input-group">\n\
                            <input type="text" name="permission[]" id="delete" class="form-control inline" placeholder="Delete" value="Delete" readonly>\n\
                            <input type="text" name="function_call[]" id="delete_function" class="form-control inline" placeholder="delete" value="delete">\n\
                            <span class="input-group-btn">\n\
                                <button type="button" class="btn btn-default add"><i class="fa fa-plus"></i></button>\n\
                                <button type="button" class="btn btn-default remove"><i class="fa fa-minus"></i></button>\n\
                            </span>\n\
                        </div>';
        $('#permissions').html(permissions);
        addEventListeners();
    });
}

$(function() {

    addEventListeners();

    
    

//    $('button.add').click(function(e) {
//        e.preventDefault();
//        
//        var dataOption = $(this).closest('div.data');
//        var markup = '';
//        
//        var imagePath = $('#single-image-path').val();
//        
//         markup += '<div class="data">\n';
//         markup += '<input type="text" name="single-data[][text]" class="form-control value input-sm" required="true" placeholder="Option Default Text">\n';
//         markup += '<input type="text" name="single-data[][value]" class="form-control text input-sm" required="true" placeholder="Option Default Value">\n';
//         markup += '<input type="text" name="single-data[][image]" class="form-control image input-sm image-control" required="true" placeholder="URL or path" value="' + imagePath + '">\n';
//         markup += '<div class="btn-group btn-group-sm">\n';
//         markup += '<a href="javascript:void(0)" class="btn btn-default btn-sm btn-add"><i class="fa fa-plus"></i></a>\n';
//         markup += '<a href="javascript:void(0)" class="btn btn-default btn-sm btn-delete"><i class="fa fa-minus"></i></a>\n';
//         markup += '</div>\n';
//         markup += '</div>\n';
//        
//        dataOption.after(markup);
//        
//        $('#single-custom-data-container div.data a.btn-delete').click(function(e) {
//            var toBeRemoved = $(this).closest('div.data');
//            toBeRemoved.remove();
//        });
//        
//        createSingleData();
//        
//        if( ! $('#single-with-image').prop('checked') ) {
//            $('.image-control').hide();
//        }
//        
//    });

});